<html>
<head>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/code_highlight_styles.css">
    <script type="text/javascript" src="/static/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
    <style>
        .span6 {
            width:50%;
            float:left;
        }

        textarea {
            font-size:16px;
        }

        input.title {
            width:50%;
            line-height: 1.8em;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
    <div class="row-fluid">
        <div>
            <input type="hidden" name="id" value="{{blog.id}}">
            <input type="text" class="form-control title" name="title" width="100%" placeholder="输入文章标题" value="{{blog.title}}"/>
        </div>
    </div>
	<div class="row-fluid">
		<div class="span6">
			<h3>
				这里编辑文章内容（Markdown格式）
			</h3>
            <textarea cols="110" rows="40" class="form-control">{{blog.content}}</textarea>
            <div style="margin:5px auto;width:50px;"><button class="btn btn-primary" id="save-blog-btn">保存文章</button></div>
		</div>
		<div class="span6">
			<h3>
				效果预览
			</h3>
            <div id="preview">
                <div>
                </div>
            </div>
		</div>
	</div>
</div>
<script>
    $(function() {
       setInterval('preview()',2000);
        $('#save-blog-btn').on('click',function() {
           var text = last_content;
            var id = $('[name=id]').val();
            var title = $('input[name=title]').val();

            if (title.trim().length == 0) {
                alert('请输入文章标题');
                return;
            }

            if (text.length == 0) {
                alert('请输入文章内容');
                return;
            }

            $.post('/blog/create',{id:id,title:title,content:text},function(r) {
                r = $.parseJSON(r);
                if (r.status == 200) {
                    alert('保存成功！');
                    location.assign('/blog/manage');
                }
                else {
                    alert(r.msg);
                }
            });
        });
    });

    var last_content = '';
    function preview() {
        var text = $('textarea').val();

        if (text != last_content) {
            last_content = text;
            $.post('/markdown_2_html',{content:text},function(r) {
                $('#preview').html(r);
            });
        }
    }
</script>
</body>
</html>